<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐进式加载</title>
    <style>
        body{
            margin: 0;
        }
        .image-container{
            max-width: 100%;
            max-height: 100%;
            filter: blur(2px);
            transition: all .3s ease-in-out;
        }
        .image-container.loaded {
            filter: blur(0);
            opacity: 1;
        }
        .flex-between>div{
            /* float: left; */
            display: inline-block;
            max-width: 25%;
            min-width: 25%;
        }
    </style>
</head>
<body>
    <div class="flex-between"></div>
    <div id="addImages">添加</div>
    <script>
        (function() {
            addImages()
            // 自定义指令函数
            function lazyLoadDirective(img, delay) {
                // 设置初始缩略图
                const thumbnail = img.getAttribute('data-src');
                const highRes = img.getAttribute('data-lazy-load');
                img.classList.add('image-container');
                img.src = thumbnail;
                // 图片加载完成替换成原图
                img.onload = () => {
                    setTimeout(() => {
                        img.src = highRes;
                        // 添加 loaded 类名以触发过渡效果
                        img.classList.add('loaded');
                    }, delay);
                    
                };
                // 处理图片加载失败的情况
                img.onerror = () =>  img.src = highRes;
            }
            // 添加图片的函数
            function addImages() {
                const container = document.querySelector('.flex-between');
                const newImages = [
                    { lazyLoad: './highRes.png', src: './thumbnail.png' },
                    { lazyLoad: './1.png', src: './1.1.png' },
                    { lazyLoad: './2.png', src: './2.2.png' },
                    { lazyLoad: './3.png', src: './3.3.png' }
                ];
                // 存储新创建的图片元素
                const newImageElements = [];
                newImages.forEach((image, index) => {
                    const imgElement = document.createElement('img');
                    imgElement.classList.add('img');
                    imgElement.setAttribute('data-lazy-load', image.lazyLoad);
                    imgElement.setAttribute('data-src', image.src);
                    imgElement.alt = 'Image';
                    const divElement = document.createElement('div');
                    divElement.appendChild(imgElement);
                    container.appendChild(divElement);
                    // 将新创建的图片元素添加到数组中
                    newImageElements.push(imgElement);
                });

                // 只对新创建的图片元素应用懒加载指令
                newImageElements.forEach((img, index) => {
                    const delay = index * 500; // 每张图片延迟 1 秒
                    lazyLoadDirective(img, delay);
                });
            }
            // 监听按钮点击事件
            const addButton = document.getElementById('addImages');
            addButton.addEventListener('click', addImages);
        })();
    </script>
</body>
</html>